<template>
  <div ref="refCompList" class="dc-page-design-comp-list dc-draggable-container">
    <left-comp-item v-for="item in compList" :key="item.key" :data="item" />
  </div>
</template>

<script setup>
import { useTemplateRef } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
import _ from 'lodash'

import LeftCompItem from './left-comp-item.vue'

const props = defineProps({
  compList: {
    type: Array,
    default: []
  }
})

const refCompList = useTemplateRef('refCompList')
useDraggable(refCompList, props.compList, {
  animation: 150,
  ghostClass: 'dc-draggable-ghost',
  group: { name: 'draggableGroup', pull: 'clone', put: false },
  sort: false,
  dragClass: 'dc-draggable-class',
  handle: '.dc-draggable-handler',
  clone (element) {
    const newData = _.cloneDeep(element)
    newData.id = new Date().getTime()
    newData.name += 'Copy'
    return newData
  },
  onClone () {
    // console.log('clone')
  }
})
</script>

<style lang='scss' scoped>
</style>
